<template>
   <div class="product-list-wati-child">
     <el-card>
      <div slot="header" class="card-title">
        <span>添加</span>
        <div class="close" type="text" @click="close">关闭</div>
      </div>
      <div class="search">
        <el-input size="small" class="search-input" clearable v-model="keyword" placeholder="输入配料编号/名称关键字搜索"></el-input>
        <el-button plain size="small" type="primary" @click="getData">查询</el-button>
      </div>
      <el-table
      ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        size="mini"
        align="center"
        @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

        <el-table-column
          prop="material_number"
          label="配料编号"
          min-width="100"
          align="center">
        </el-table-column>

        <el-table-column
          prop="material_name"
          label="配料名称"
          min-width="170"
          align="center">
        </el-table-column>

        <el-table-column
          label="规格/型号"
          min-width="190"
          align="center">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                plain
                type="info"
                @click="add(scope.$index)" v-text="scope.row._models.length>0?(scope.row._models).join(','):'新增'"></el-button> -->
              <div v-if="scope.row._models_name.length>0" class="check-list" @click="add(scope.$index)" v-text="(scope.row._models_name).join(',')"></div>
              <div v-else class="check-list-none">暂无,请先到配料列表增加规格/型号</div>
              <!-- <el-button
                v-else
                size="mini"
                plain
                type="info"
                @click="add(scope.$index)" v-text="'新增'"></el-button> -->
              <!-- <div class="check-list" @click="add(scope.$index)" v-text="scope.row['_models']"></div> -->
            </template>
        </el-table-column>

        <el-table-column
          prop="material_unit"
          label="单位"
          min-width="120"
          align="center">
        </el-table-column>
      </el-table>

        <el-pagination class="page-count"
        @current-change="getData" 
        background layout="total, prev, pager, next" 
        :total="totalCount" 
        :current-page.sync='page' 
        :page-size="10"></el-pagination>
      
      <div class="btn">
        <el-button
        size="mini"
        plain
        type="danger"
        @click="close">取消</el-button>
        <el-button
        size="mini"
        plain
        type="primary"
        @click="confirm">确认</el-button>
      </div>

      <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm>
  </el-card>

    <el-card class="check-wrap" v-show="modelShow">
      <el-checkbox-group class="checkbox" v-model="model">
        <!-- <el-checkbox border label="复选框A"></el-checkbox>
        <el-checkbox border label="复选框B"></el-checkbox>
        <el-checkbox border label="复选框C"></el-checkbox> -->
        <template v-for="(item,index) in formats">
          <el-checkbox :key="index" border :label="item.format_id">{{item.format_name}}</el-checkbox>
        </template>
      </el-checkbox-group>
      <div class="btn">
        <el-button
        size="mini"
        plain
        type="danger"
        @click="modelClose">取消</el-button>
        <el-button
        size="mini"
        plain
        type="primary"
        @click="modelConfirm">确认</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Emit, Watch } from 'vue-property-decorator';
import ajaxResquest from '@/api/apiRequest';
import AjaxResquest from '@/api/apiRequest';

@Component({})
export default class ProduceOutCreateDetailTable extends Vue {
  tableData: any[] = [];
  keyword: string = '';
  totalCount: number = 0;

  goodsRes!: ajaxResquest;
  showMask: boolean = false;
  page: number = 1;

  modelShow: boolean = false;
  model: any[] = [];
  openIndex!: number;

  formats: any = [];

  hasSelect: any[] = [];
  $refs!: any;
  @Prop()
  id!: any;

  @Watch('model')
  modelChange(val: any) {}

  mounted() {
    this.goodsRes = new ajaxResquest('/purchase/getWaitPurchaseList');
    this.getData();
  }
  // 增加规格/型号的函数
  add(index: number) {
    // 获取打开的index
    this.openIndex = index;
    this.model = this.tableData[index]._models_id;
    this.modelShow = true;
    // 把checkbox赋值
    this.formats = this.tableData[index].format_info;
  }
  getData() {
    let data = {
      keyWord: this.keyword,
      orderId: this.id
    };
    this.goodsRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.totalCount = res.data.data.allCount;
        this.tableData = res.data.data.types;
        this.tableData.map((i: any) => {
          // return (i._models = []);
          i._models_name = [];
          i._models_id = [];
          i.format_info.map((j: any) => {
            i._models_name.push(j.format_name);
            i._models_id.push(j.format_id);
          });
        });
      }
    });
  }
  // 勾选动作
  handleSelectionChange(val: any) {
    this.hasSelect = val;
  }
  @Emit()
  close() {}
  // 添加列表的确认
  confirm() {
    this.$emit('confirm', this.hasSelect);
    this.$refs.multipleTable.clearSelection();
  }
  // 复选框关闭
  modelClose() {
    this.modelShow = false;
  }

  // 复选框的确认
  modelConfirm() {
    let temp = this.tableData[this.openIndex];
    temp._models_name = this.model;
    let tempName: any[] = [];
    this.formats.map((i: any) => {
      if (this.model.includes(i.format_id)) {
        tempName.push(i.format_name);
      }
    });
    temp._models_name = tempName;
    temp._models_id = this.model;
    this.$set(this.tableData, this.openIndex, temp);
    this.modelShow = false;
  }
}
</script>
<style lang="less">
.product-list-wati-child {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  // min-width: 600px;
  width: auto;
  height: 500px;
  z-index: 999;
  .search {
    text-align: left;
    margin-bottom: 20px;
    .search-input {
      width: 300px;
      margin: 0 20px 0 0px;
    }
  }
  .page-count {
    margin-top: 10px;
    text-align: right;
  }
  .btn {
    margin-top: 15px;
    text-align: left;
  }
  .check-wrap {
    z-index: 10001;
    position: absolute;
    top: 30%;
    left: 20%;
  }
  .check-list {
    text-decoration: underline;
    color: rgb(33, 132, 231);
  }
}
</style>
